<template>
  <div id="zczxl_bar" :style="{ width: '100%', height: '100%' }"></div>
</template>
<script>
// https://echarts.apache.org/examples/zh/editor.html?c=bar1 图表网址
import echarts from 'echarts'
let echartData = {}
export default {
  name: 'zczxl_bar',
  props: ['zxlbarData'],
  data: function() {
    return {}
  },
  watch: {
    zxlbarData: {
      // 正确给 cData 赋值的 方法
      deep: true,
      handler(newVal, oldVal) {
        echartData = newVal
      }
    }
  },
  mounted() {
    echartData = this.zxlbarData
    var myChart = echarts.init(document.getElementById('zczxl_bar'))
    const option = {
      tooltip: {
        trigger: 'axis',
        formatter: '{b} : {c}' + echartData.danwei
      },
      legend: {
        data: [echartData.title]
      },
      toolbox: {
        show: true
        // feature: {
        //   dataView: { show: true, readOnly: false },
        //   magicType: { show: true, type: ['line', 'bar'] },
        //   restore: { show: true },
        //   saveAsImage: { show: true }
        // }
      },
      calculable: true,
      label: {
        show: true,
        position: 'top',
        color: '#333',
        fontSize: 12,
        fontWeight: 700,
        formatter: '{c}' + echartData.danwei
      },
      grid: [
        {
          top: 55,
          height: '85%',
          width: '95%',
          left: 10,
          containLabel: true
        }
      ],
      xAxis: [
        {
          type: 'category',
          //   axisLabel: {
          //     interval: 1,
          //     margin: 30
          //   },
          axisTick: {
            show: true,
            alignWithLabel: true,
            interval: 0
          },
          axisLabel: {
            margin: 15, // 刻度标签与轴线之间的距离
            textStyle: {
              //   color: '#595959' // 坐标值的颜色
            },
            rotate: echartData.title === '品牌' ? 0 : 45,
            formatter: function(params) {
              var newParamsName = ''
              var paramsNameNumber = params.length // 总字数
              var provideNumber = 8 // 一行显示几个字
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ''
                  var start = p * provideNumber
                  var end = start + provideNumber
                  if (p === rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber)
                  } else {
                    tempStr = params.substring(start, end) + '\n'
                  }
                  newParamsName += tempStr
                }
              } else {
                newParamsName = params
              }

              return newParamsName
            }
          },
          data: echartData.wz
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: echartData.title,
          type: 'bar',
          color: echartData.color,
          barWidth: 20, // 柱子宽度
          data: echartData.sj
          // markPoint: {
          //   data: [
          //     { type: 'max', name: '最大值' },
          //     { type: 'min', name: '最小值' },
          //     {
          //       label: {
          //         show: true
          //       }
          //     }
          //   ]
          // },
          // markLine: {
          //   data: [{ type: 'average', name: '平均值' }]
          // }
        }
      ]
    }
    myChart.setOption(option)
    window.addEventListener('resize', function() {
      //   让我们图表调用resize方法
      myChart.resize()
    })
  }
}
</script>
<style lang="scss"></style>
